import LayoutWhite from "@/components/LayoutWhite";
import Title from "@/components/Title";
import { Button, message, Space, Table } from "antd";
import FormItems from "@/components/FormItem";
import { useEffect, useRef, useState } from "react";
import moment from "moment";
import { useLocation, useNavigate } from "react-router-dom";
import { userList } from "@/api/modules/user";

type ArrItems = {
	name: string;
	label: string;
	type: string;
	placeholder?: string;
	rules?: any[];
	options?: any[] | any;
};

const guanXi = [
	{
		value: "0",
		label: "父子"
	},
	{
		value: "1",
		label: "母子"
	}
];

const Embedded = () => {
	const navigate = useNavigate();
	const location = useLocation();
	const [data, setData] = useState<any[]>([]);
	const [formVal, setFormVal] = useState<any>({});
	const [opti, setOpti] = useState<any[]>([]);
	console.log(opti);

	useEffect(() => {
		userList({}).then(res => {
			console.log(res);
			debugger;
		});
	}, []);
	const columns: any[] = [
		{
			title: "用户编码",
			dataIndex: "code",
			key: "code",
			align: "center",
			render: (text: any) => <a>{text}</a>
		},
		{
			title: "用户名称",
			dataIndex: "name",
			key: "name",
			align: "center"
		},
		{
			title: "账号 | 联系方式",
			dataIndex: "telephone",
			key: "telephone",
			align: "center"
		},
		{
			title: "用户地区",
			key: "address",
			dataIndex: "address",
			align: "center"
		},
		{
			title: "关联就诊人员",
			key: "patientInfoList",
			dataIndex: "patientInfoList",
			align: "center",
			render: (record: any) => {
				return record?.map((item: any, ind: number) => {
					return (
						<p key={ind}>
							{guanXi.find(v => v.value == item.relation)?.label}&nbsp;|&nbsp;{item?.name} ({item?.telephone})
						</p>
					);
				});
			}
		},
		{
			title: "注册时间",
			key: "createdAt",
			dataIndex: "createdAt",
			align: "center"
		},
		{
			title: "用户类型",
			key: "type",
			dataIndex: "type",
			align: "center"
		},
		{
			title: "操作",
			dataIndex: "",
			key: "x",
			align: "center",
			render: (text: any) => <a onClick={() => navigate(`/userManage/edit?id=${text?.id}`)}>编辑</a>
		}
	];
	const formRef: any = useRef(null);
	// const items: ArrItems[] = [
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "name",
	// 		label: "同步下拉框",
	// 		type: "2",
	// 		options: [
	// 			{ label: "选项1", value: "1" },
	// 			{ label: "选项2", value: "2" }
	// 		]
	// 	},
	// 	{
	// 		name: "names",
	// 		label: "异步数据下拉框",
	// 		type: "2",
	// 		options: opti
	// 	},
	// 	{
	// 		name: "time",
	// 		label: "日期选择",
	// 		type: "3"
	// 	},
	// 	{
	// 		name: "times",
	// 		label: "日期范围选择",
	// 		type: "4"
	// 	},
	// 	{
	// 		name: "timeRange",
	// 		label: "时间范围选择",
	// 		type: "5"
	// 	},
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	}
	// ];

	// 模拟异步
	const items: ArrItems[] = [
		{
			name: "code",
			label: "用户编码",
			type: "1"
		},
		{
			name: "name",
			label: "用户名称",
			type: "1"
		},
		{
			name: "telephone",
			label: "联系方式",
			type: "1"
		},
		{
			name: "address",
			label: "用户地区",
			type: "6"
		},
		{
			name: "createdAt",
			label: "注册时间",
			type: "3"
		},
		{
			name: "type",
			label: "用户状态",
			type: "2",
			options: [
				{ label: "已启用", value: "0" },
				{ label: "未启用", value: "1" }
			]
		}
	];
	const a = () => {
		return new Promise(response => {
			setTimeout(() => {
				response([
					{ label: "选项3", value: "3" },
					{ label: "选项4", value: "4" }
				]);
			}, 3000);
		});
	};

	// 提前请求 获取下拉框数据
	const init = async () => {
		const arr: any[] = (await a()) as any;
		setOpti(arr);
	};

	useEffect(() => {
		init();
	}, []);

	// 拓展按钮 可传可不传
	const moreButton = () => {
		return "";
	};

	// const moreOnClick = () => {
	// 	message.success("点击更多");
	// };

	const tableSearch = () => {
		getData();
		message.success(JSON.stringify(formVal));
	};

	// 对某些 搜索条件进行处理
	const changeSearch = (val: any) => {
		if (val.time) val.time = moment(val.time).format("YYYY-MM-DD");
		if (val.times) {
			val.startTime = moment(val.times[0]).format("YYYY-MM-DD");
			val.endTime = moment(val.times[1]).format("YYYY-MM-DD");
			delete val.times;
		}
		if (val.timeRange) {
			val.startTimes = moment(val.timeRange[0]).format("YYYY-MM-DD hh:mm:ss");
			val.endTimes = moment(val.timeRange[1]).format("YYYY-MM-DD hh:mm:ss");
			delete val.timeRange;
		}
		setFormVal(val);
	};

	const getData = async () => {
		const { data } = await userList({ ...formVal });
		setData(data?.data || []);
	};

	useEffect(() => {
		getData();
	}, [location]);

	return (
		<div>
			<LayoutWhite>
				<Title word={"用户管理"} more={moreButton()} />
				<FormItems itemProps={items} callback={val => changeSearch(val)} ref={formRef} />
				<div style={{ display: "flex", flexDirection: "column" }}>
					<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
						<Space>
							<Button
								onClick={() => {
									setFormVal({});
									formRef.current.reset();
								}}
							>
								重置
							</Button>
							<Button type="primary" onClick={() => tableSearch()}>
								搜索
							</Button>
							<Button type="primary" onClick={() => navigate("/userManage/add")}>
								新增
							</Button>
						</Space>
					</div>
					<Table bordered={true} columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
				</div>
			</LayoutWhite>
		</div>
	);
};
export default Embedded;
